<!--购物车收货地址组件-->
<template>
    <div class="receiving-address">
        <div class="title">我的收货地址</div>
        <div class="default-address-container" v-if='addressData'>
            <div>
                <div class="address-item">收货人：{{ addressData.consignee }}</div>
                <div class="address-item">收货地址：{{ addressData.addressDetail }}</div>
                <div class="address-item">收货手机号：{{ addressData.phone }}</div>
            </div>
            <div>
                <el-button type="success" @click="addAddressDialog">添加地址</el-button>
                <el-button type="success" @click="handleChange">更换地址</el-button>
            </div>
        </div>

        <div style="width: 100%;text-align: center;display: flex;justify-content: space-around;" v-if='!addressData'>
            暂无收货地址
        </div>

        <!-- 添加地址弹窗 -->
        <el-dialog v-model="dialogVisibleAddress" title="添加收货地址" width="500" :before-close="handleClose">
            <el-form :model="newAddress" label-width="120px" style="text-align: right;">
                <el-form-item label="收货人账号">
                    <el-input style="width: 300px;" v-model="newAddress.ownName"></el-input>
                </el-form-item>
                <el-form-item label="收获姓名">
                    <el-input style="width: 300px;" v-model="newAddress.consignee"></el-input>
                </el-form-item>
                <el-form-item label="收获人手机号">
                    <el-input style="width: 300px;" v-model="newAddress.phone"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input style="width: 300px;" v-model="newAddress.addressDetail"></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisibleAddress = false">取消</el-button>
                    <el-button type="primary" @click="addNewAddress">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>


        <!-- 更换地址弹窗 -->
        <el-dialog title="更换地址" v-model="dialogVisible" width="580px" :before-close="handleClose">
            <el-table :data="allAddressData" tooltip-effect="dark" style="width: 100%;margin-bottom: 10px;"
                @current-change="handleCurrentChange" ref="listTable" highlight-current-row>
                <el-table-column label="收货人" prop="consignee" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="addressDetail" label="收获地址" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="收获手机号" width="120" show-overflow-tooltip></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="success" @click="submitChange">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>

import { selectAllAddressByUsername, addAddress } from '@/api/address'
import { ElMessage } from 'element-plus';
import { ref, defineEmits } from 'vue'


const emit = defineEmits(['updateAddress'])

const addressData = ref({})
const dialogVisible = ref(false)
const allAddressData = ref([])
const currentRow = ref(null)
const address = ref({})
const dialogVisibleAddress = ref(false)
const newAddress = ref({
    ownName: '',
    consignee: '',
    phone: '',
    addressDetail: ''
})



const load = () => {
    selectAllAddressByUsername().then(res => {
        addressData.value = res.data[0]
        allAddressData.value = res.data
        updateAddress()
    })
}
load()


const handleChange = () => {
    dialogVisible.value = true
}

const handleClose = () => {
    dialogVisible.value = false
}

const submitChange = () => {
    addressData.value = currentRow.value
    updateAddress()
    dialogVisible.value = false
}

const handleCurrentChange = (val) => {
    currentRow.value = val
}

const updateAddress = () => {
    emit('getAddress', addressData.value)
}

const addAddressDialog = () => {
    dialogVisibleAddress.value = true
}

const addNewAddress = () => {
    if (newAddress.value  && newAddress.value.consignee && newAddress.value.phone && newAddress.value.addressDetail) {
        addAddress(newAddress.value).then(res => {
            if (res.flag == true) {
                ElMessage.success('添加成功！')
                dialogVisibleAddress.value = false
                load()
            } else {
                ElMessage.error('添加失败！')
            }
        })
    } else {
        ElMessage.error('请填写完整信息！')
    }
}

</script>

<style lang="scss" scoped>
.receiving-address {
    position: relative;
    text-align: left;
    color: black;

    .title {
        border-bottom: 2px solid #f2f2f2;
        padding: 10px 0px;
        font-size: 18px;
    }
}

.default-address-container {
    border: 1px dashed darkseagreen;
    border-radius: 6px;
    padding: 10px 20px;
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: space-between;

    .address-item {
        line-height: 30px;
        height: 30px;
        margin-right: 50px;
    }
}
</style>